@import '../../../themes/mixins/loading-spinner';
@import '../../../themes/mixins/error-message';

.component {
  display: flex;

  .amountTokenTotal {
    color: var(--theme-input-right-floating-text-color);
    font-family: var(--font-regular);
    font-size: 14px;
    line-height: 1.36;
    position: absolute;
    right: 18px;
    top: 2px;
  }

  .amountValue {
    &:before {
      content: ' ';
    }
  }

  .assetItem {
    margin-bottom: 20px;
  }

  .removeAssetButton {
    align-items: center;
    border-radius: 3px;
    color: var(--theme-staking-stake-pools-search-clear-button-color);
    cursor: pointer;
    display: flex;
    height: 28px;
    justify-content: center;
    width: 28px;
  }

  .rightContent {
    align-items: center;
    bottom: 0;
    display: inline-flex;
    height: 48px;
    position: absolute;
    right: 10px;
    top: 34px;
  }

  .inputBlock {
    flex: 1 1 auto;
    position: relative;
  }
}

.clearAssetContainer {
  align-items: center;
  display: flex;
  height: 48px;

  .clearAssetButton {
    background-color: var(
      --theme-staking-stake-pools-search-clear-button-background-color
    );
    border-radius: 3px;
    cursor: pointer;
    height: 28px;
    width: 28px;

    &:hover {
      background-color: var(
        --theme-staking-stake-pools-search-clear-button-hover-background-color
      );
    }

    .clearReceiverIcon {
      > svg {
        position: relative;
        top: 0.5px;
        width: 10px;

        > g > g {
          fill: var(--theme-staking-stake-pools-search-clear-button-color);
        }
      }
    }
  }

  & + .ticker {
    margin-left: 10px;
  }
}

.divider {
  background-color: var(--theme-input-placeholder-color);
  height: 20px;
  margin: 0 20px;
  opacity: 0.2;
  width: 1px;
}

.ticker {
  color: var(--theme-input-placeholder-color);
  font-family: var(--font-regular);
  font-size: 16px;
  font-weight: 300;
  margin-right: 10px;
  text-transform: uppercase;
  z-index: 1;
}

.removeAssetBlock {
  align-items: center;
  display: flex;
  height: 48px;
  margin: 34px 11px 0 11px;
}

.removeIcon {
  align-items: center;
  display: flex;
  justify-content: center;

  & > svg {
    height: 2px;
  }
}
